<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no,minimum-scale=1.0,maximum-scale=1.0">
    <link rel="stylesheet" href="css/reset.css"/>
    <link rel="stylesheet" href="css/main2.css"/>
    <link rel="stylesheet" href="css/tab.css"/>
    <title></title>
</head>
<body>
<div class="wrapper">
    <section class="rxz-header">
        <section class="header-top">
            <p>活动时间：3月15日-3月26日</p>
        </section>
            <a href="#" class="login">欢迎13700000000 [退出]</a>
    </section>
    <div class="treasure-box">
        <img src="./images/treasureBox.png" class="box">
        <!-- <img src="./images/friend-coupon-1.png" class="coupon"> -->
    </div>
    <a href="#" class="join-btn"><img src="./images/iwannajoin-btn.png"></a>
    <section class="rxz-rule">
        <h2></h2>
        <p>
            1.爱租哪携手银城千万间、美丽屋，为南京租客加油 <br>
            2.活动期间可进入活动页面，领取租房抵用券（1365元、665元、
            365元）可抵扣房租 <br>
            3.没有求租需求的小伙伴可以通过分享，领取其他生活补贴福利 <br>
            4. 成功领取爱租哪生活福利券滴朋友，注意查收短信
        </p>
    </section>
    <section class="friend-luck">
        <h1></h1>
        <section class="items">
            <div class="friend-coupom-item">
                <img src="./images/friend-coupon-1.png" class="friend-coupon">
                <img src="./images/f-index-1.png" class="index">
                <div class="content-middle">
                    <div class="phone">137****1000</div>
                    <div class="time">01.01  10:00</div>
                </div>
            </div>
            <div class="friend-coupom-item">
                <img src="./images/friend-coupon-2.png" class="friend-coupon">
                <img src="./images/f-index-2.png" class="index">
                <div class="content-middle">
                    <div class="phone">137****1000</div>
                    <div class="time">01.01  10:00</div>
                </div>
            </div>
            <div class="friend-coupom-item">
                <img src="./images/friend-coupon-3.png" class="friend-coupon">
                <img src="./images/f-index-3.png" class="index">
                <div class="content-middle">
                    <div class="phone">137****1000</div>
                    <div class="time">01.01  10:00</div>
                </div>
            </div>
            <div class="friend-coupom-item">
                <img src="./images/friend-coupon-4.png" class="friend-coupon">
                <img src="./images/f-index-4.png" class="index">
                <div class="content-middle">
                    <div class="phone">137****1000</div>
                    <div class="time">01.01  10:00</div>
                </div>
            </div>
            <div class="friend-coupom-item">
                <img src="./images/friend-coupon-5.png" class="friend-coupon">
                <img src="./images/f-index-5.png" class="index">
                <div class="content-middle">
                    <div class="phone">137****1000</div>
                    <div class="time">01.01  10:00</div>
                </div>
            </div>
        </section>
    </section>
    <section class="band">
        <h1></h1>
        <ul class="clearfix">
            <li>
                <img src="images/cooperativePartner-1.png" alt=""/>
            </li>
            <li>
                <img src="images/cooperativePartner-2.png" alt=""/>
            </li>
            <li>
                <img src="images/cooperativePartner-3.png" alt=""/>
            </li>
            <li>
                <img src="images/cooperativePartner-4.png" alt=""/>
            </li>
            <li>
                <img src="images/cooperativePartner-5.png" alt=""/>
            </li>
        </ul>
    </section>
</div>
<div class="tab-switcher">
    <a href="">
        <div class="tab-item active">
            <img src="./images/tab-item-main-stage.png">
            <div class="tab-title">主会场</div>
        </div>
    </a>
    <a href="">
        <div class="tab-item">
            <img src="./images/tab-item-silver-city.png">
            <div class="tab-title">银城</div>
        </div>
    </a>
    <a href="">
        <div class="tab-item">
            <img src="./images/tab-item-beauty-house.png">
            <div class="tab-title">美丽屋</div>
        </div>
    </a>
    <a href="">
        <div class="tab-item my-card">
            <img src="./images/tab-item-card.png">
            <div class="tab-title">我的卡卷</div>
        </div>
    </a>
</div>
</body>
<script type="text/javascript" src="./js/jquery-1.8.2.min.js"></script>
<script>
    ;(function (doc, win) {
        var docEl = doc.documentElement,
                resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
                recalc = function () {
                    var clientWidth = docEl.clientWidth;
                    if (!clientWidth) return;
                    docEl.style.fontSize = 20 * (clientWidth / 375) + 'px';
                };

        if (!doc.addEventListener) return;
        win.addEventListener(resizeEvt, recalc, false);
        doc.addEventListener('DOMContentLoaded', recalc, false);

    })(document, window);
    $(document).ready(function() {
        function getTreasure(num) {  //变换奖品，0为宝箱，1~5为奖品
            if (num == 0) {
                $('.treasure-box').html('<img src="./images/treasureBox.png" class="box">')
            } else {
                $('.treasure-box').html('<img src="./images/friend-coupon-' + num + '.png" class="coupon">')
            }
        }
    })
</script>
</html>